<template>
    <div class="header">
        <span>全选:</span>
        <input type="checkbox" v-model="isAll" />
        <button @click="btn">反选</button>
    </div>

    <ul>
        <li v-for="(item,index) in list" :key="index">
            <input type="checkbox" v-model="item.c" />
            <span>{{item.name}}</span>
        </li>
    </ul>

</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    name: '萧炎',
                    c:false
                },
                {
                    name: '叶凡',
                    c: false
                },
                {
                    name: '白小纯',
                    c: false
                },
                {
                    name: '美杜莎',
                    c: false
                }
            ]
        }
    },
    computed: {
        // isAll() {
        //     // every 判断数组中所有元素是否都满足条件，返回布尔值 如不满足直接返回fasle
        //     return this.list.every(item => item.c === true)
        // }
        //全选影响小选
        isAll: {
            get() { 
                return this.list.every(item => item.c === true)
            },
            set(val) { 
                console.log(val);
                
                //获取全选选中的状态
                this.list.forEach(item=> item.c=val)
            }
        }
    },
    methods: {
        btn() {
            this.list.forEach(item => item.c = !item.c)
        }
    }
}

</script>
<style scoped>
.header{
    margin-left: 50px;
    margin-top: 50px;
}
.header span{
    font-size: 20px;
    font-weight: 900;
    margin-right: 10px;
}
.header input{
    margin-right: 5px;
}
ul{
    margin-left: 107px;
    margin-top: 20px;
}
ul li input{
    margin-right: 10px;
}
</style>